<template>
  <div class="circle-nav">
    <div id="circle-plus" @click="toggleFgg"><span class="heng animated"></span><span class="shu animated"></span></div>
    <div id="circle-nav" class="animated">
        <ul class="outer-nav">
            <li v-for="(item, index) in outerList" :key="index"><a href="#" class="animated"><span>{{item}}</span></a></li>
        </ul>
        <ul class="inner-nav">
            <li v-for="(item, index) in innerList" :key="index"><a href="#" class="animated"><span>{{item}}</span></a></li>
        </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
/* eslint-disable */
import autoPrefix from "@/assets/js/common/autoprefix";
export default {
  name: "ArticleGuanZhu",
  data() {
    return {
      fgg: true,
      outerList: ["外导航一","外导航二","外导航三","外导航四","外导航五","外导航六","外导航七","外导航八","外导航九"],
      innerList: ["内导航一","内导航二","内导航三","内导航四"]
    };
  },
  components: {},
  computed: {},
  methods: {
    toggleFgg(e){
      // e.stopPropagation();
      console.log(e.currentTarget);
      const self = this;
      if(this.fgg === true){
        e.currentTarget.style.bottom = "2.85rem";
        e.currentTarget.style.background = "#666";
        $(e.currentTarget).find("span.shu").removeClass("rotateIn").addClass("rotateOut");
        $(e.currentTarget).find("span.heng").addClass("rubberBand");
        $("#circle-nav").css("display","block"); 
        setTimeout(function(){
          setTimeout(function(){
            $("#circle-nav li").css("opacity","1");
          },1);
          $("#circle-nav").removeClass("bounceOut").addClass("bounceIn");
          $("#circle-nav li a").addClass("bounceInRight").removeClass("bounceOutRight");
          self.fgg = false;
        }, 0)
      } else {
        e.currentTarget.style.bottom = "4.98696rem";
        e.currentTarget.style.background = "#6cb7f8";
        $(e.currentTarget).find("span.shu").removeClass("rotateOut").addClass("rotateIn");
        $(e.currentTarget).find("span.heng").removeClass("rubberBand");
        $("#circle-nav").removeClass("bounceIn").addClass("bounceOut");
        $("#circle-nav li a").addClass("bounceOutRight").removeClass("bounceInRight");
        setTimeout(function(){
          $("#circle-nav li").css("opacity","0");
          $("#circle-nav").css("display","none");
          self.fgg = true;
        }, 1000)
      }
    },
    roateMove() {
      
      let transform = autoPrefix('transform')[1];
      var fgg = true;
      var circleNav = document.getElementById("circle-nav");
      var outerNav = document.querySelector("#circle-nav .outer-nav");
      var outerSpan = document.querySelectorAll("#circle-nav .outer-nav span");
      var outerLi = document.querySelectorAll("#circle-nav .outer-nav li");
      var innerSpan = document.querySelectorAll("#circle-nav .inner-nav span");
      var innerLi = document.querySelectorAll("#circle-nav .inner-nav li");
      var listLi = document.querySelectorAll("#circle-nav li");
      for(let i=0; i<outerLi.length; i++){
        outerLi[i].style[transform] = "rotate("+(9+i*18)+"deg)";
        };
      for(let i=0; i<innerLi.length; i++){
        innerLi[i].style[transform] = "rotate("+(15+i*30)+"deg)";
        }; 
      for(let i=0; i<outerSpan.length; i++){
        outerSpan[i].style[transform] = "rotate(-"+(9+i*18)+"deg)";
        };
      for(let i=0; i<innerSpan.length; i++){
        innerSpan[i].style[transform] = "rotate(-"+(15+i*30)+"deg)";
        };
      for(let i=0; i<listLi.length; i++){
        listLi[i].addEventListener('touchstart',touch,false);
        listLi[i].addEventListener('touchmove',touch,false);
        listLi[i].addEventListener('touchend',touch,false);
      };
      var w = document.body.clientWidth;
      // var h = document.body.clientHeight; 获取文档高度
      var h = document.documentElement.clientHeight;
      var startX,endX,moveX;
      var startY,endY,moveY;
      var anglemoveOuter = 0;
      var anglemoveInner = 0;
      var _anglemoveOuter = 0;
      var _anglemoveInner = 0;
      function touch (event){
          // var event = event || window.event; //兼容 ie8
        switch(event.type){
          case "touchstart":
            // console.log(event);
            //记录触点初始位置
            startX = event.touches[0].pageX;
            startY = event.touches[0].pageY;
            _anglemoveOuter = anglemoveOuter;
            _anglemoveInner = anglemoveInner;
            // console.log(this);
            if(this.parentNode.getAttribute('class')=="outer-nav"){
              this.parentNode.style[transform] = "rotate("+(-_anglemoveOuter)+"deg)";
            } else {
              this.parentNode.style[transform] = "rotate("+(-_anglemoveInner)+"deg)";
            };
            // console.log(startX,startY);
            break;
          case "touchend":
            var _thisPar = this.parentNode.querySelectorAll("span");
            if(this.parentNode.getAttribute('class')=="outer-nav"){
                if(anglemoveOuter<0){
                  anglemoveOuter = 0
                }else if(anglemoveOuter>=18*(_thisPar.length-5)) {
                  anglemoveOuter=18*((_thisPar.length-5)>0?(_thisPar.length-5):0)
                }
                // 外圈旋转
                this.parentNode.style[transform] = "rotate("+(-anglemoveOuter)+"deg)";
                // 文字圈旋转
                for(var i=0; i<_thisPar.length; i++){
                  _thisPar[i].style[transform] = "rotate(-"+((9+i*18)-anglemoveOuter)+"deg)";
                };
            }else {
                if(anglemoveInner<0 ){
                  anglemoveInner = 0
                }else if(anglemoveInner>=30*(_thisPar.length-3)) {
                  anglemoveInner = 30*((_thisPar.length-3)>0?(_thisPar.length-3):0)
                }
                this.parentNode.style[transform] = "rotate("+(-anglemoveInner)+"deg)";
                for(var i=0; i<_thisPar.length; i++){
                  _thisPar[i].style[transform] = "rotate(-"+((15+i*30)-anglemoveInner)+"deg)";
                };
            }
            break;
          case "touchmove":
            moveX = event.touches[0].pageX;
            moveY = event.touches[0].pageY;
            var angleStart = 180 / Math.PI * Math.atan2((w-startX) ,(h-startY));
            var angleEnd = 180 / Math.PI * Math.atan2((w-moveX) ,(h-moveY));
            // console.log(angleStart,angleEnd);
            // console.log(moveX,moveY);
            var _thisPar = this.parentNode.querySelectorAll("span");
            if(this.parentNode.getAttribute('class')=="outer-nav"){
              anglemoveOuter = angleEnd - angleStart + _anglemoveOuter;
              // console.log(anglemoveOuter)
              // console.log(_anglemoveOuter);
              var anglemoveOuterLi = anglemoveOuter%18;
              // 设置外圈一格一格转动
              if(Math.abs(anglemoveOuterLi)<=18*0.5){
                anglemoveOuter = anglemoveOuter - anglemoveOuterLi
              } else if (Math.abs(anglemoveOuterLi)>18*0.5) {
                anglemoveOuter = anglemoveOuter - anglemoveOuterLi + 18*anglemoveOuter/Math.abs(anglemoveOuter)
              }
              // 处理转动超出范围
              if(anglemoveOuter<0 && anglemoveOuter>-10){
                anglemoveOuter
              }else if(anglemoveOuter<=-10){
                anglemoveOuter = -10
              }else if(anglemoveOuter>18*(_thisPar.length-5) && anglemoveOuter<18*(_thisPar.length-5)+10){
                anglemoveOuter
              }
              else if(anglemoveOuter>=18*(_thisPar.length-5)+10) {
                anglemoveOuter=18*((_thisPar.length-5)>0?(_thisPar.length-5):0)+10
              }
              // 外圈旋转
              this.parentNode.style[transform] = "rotate("+(-anglemoveOuter)+"deg)";
              // 文字圈旋转
              for(var i=0; i<_thisPar.length; i++){
                _thisPar[i].style[transform] = "rotate(-"+((9+i*18)-anglemoveOuter)+"deg)";
              };
              break;
            }else {
              anglemoveInner = angleEnd - angleStart + _anglemoveInner;
              var anglemoveInnerLi = anglemoveInner%30;
              // 设置内圈一格一格转动
              if(Math.abs(anglemoveInnerLi)<=30*0.5){
                anglemoveInner = anglemoveInner - anglemoveInnerLi
              } else if (Math.abs(anglemoveInnerLi)>30*0.5) {
                anglemoveInner = anglemoveInner - anglemoveInnerLi + 30*anglemoveInner/Math.abs(anglemoveInner)
              }
              // 处理转动超出范围
              if(anglemoveInner<0 && anglemoveInner>-10){
                anglemoveInner
              }else if(anglemoveInner<=-10){
                anglemoveInner = -10
              }else if(anglemoveInner>30*(_thisPar.length-3) && anglemoveInner<30*(_thisPar.length-3)+10){
                anglemoveInner
              }else if(anglemoveInner>30*(_thisPar.length-3)+10) {
                anglemoveInner=30*((_thisPar.length-3)>0?(_thisPar.length-3):0)+10
              }
              this.parentNode.style[transform] = "rotate("+(-anglemoveInner)+"deg)";
              for(var i=0; i<_thisPar.length; i++){
                _thisPar[i].style[transform] = "rotate(-"+((15+i*30)-anglemoveInner)+"deg)";
              };
            break;
          }        
        }
      }
    }
  },
  mounted() {
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    this.roateMove();
  }
};
</script>
<style scoped lang="scss">
#circle-plus {
  width: 2.3913rem;
  height: 2.3913rem;
  background: #6cb7f8;
  position: fixed;
  z-index: 666;
  bottom: 4.98696rem;
  right: 0.91304rem;
  border-radius: 100%;
  box-shadow: -2px 6px 6px rgba($color: #000000, $alpha: 0.1);
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out; }
#circle-plus span {
  background: #fff;
  position: absolute; }
#circle-plus span.heng {
  width: 1.30435rem;
  height: 2px;
  left: 0.54348rem;
  top: 1.13043rem; }
#circle-plus span.shu {
  width: 2px;
  height: 1.30435rem;
  left: 1.13043rem;
  top: 0.54348rem; }

#circle-nav {
  width: 25.21739rem;
  height: 25.21739rem;
  position: fixed;
  right: -12.6087rem;
  background: #eee;
  bottom: -10.7087rem;
  border-radius: 100%;
  display: none;
  z-index: 66;
  opacity: 0; }
#circle-nav .outer-nav {
  position: absolute;
  width: 25.21739rem;
  height: 25.21739rem;
  border-radius: 100%;
  top: 0;
  left: 0;
  background: #f6f6f6;
  background-size: 100%;
  box-shadow: 0 0 24px rgba($color: #000000, $alpha: 0.05);
  display: block;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out; }
#circle-nav .outer-nav li {
  width: 25.21739rem;
  height: 2.34783rem;
  position: absolute;
  text-align: center;
  left: 0;
  opacity: 0;
  top: 11.43478rem;
  z-index: 99999; }
#circle-nav .outer-nav li a {
  width: 2.34783rem;
  height: 2.34783rem;
  background: #fff;
  display: block;
  float: left;
  border-radius: 100%;
  margin-left: 0.78261rem;
  box-shadow: 0 0 16px rgba($color: #000000, $alpha: 0.1); }
#circle-nav .outer-nav li a span {
  width: 100%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6087rem;
  line-height: 0.69565rem;
  color: #ccc;
  box-sizing: border-box;
  padding-left: 0.34783rem;
  padding-right: 0.34783rem;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out; }
#circle-nav .inner-nav {
  position: absolute;
  width: 18.26087rem;
  height: 18.26087rem;
  border-radius: 100%;
  background: #ddd;
  background-size: 100%;
  top: 15%;
  left: 15%;
  box-shadow: 0 0 24px rgba($color: #000000, $alpha: 0.1);
  display: block;
  z-index: 666999;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out; }
#circle-nav .inner-nav li {
  width: 18.26087rem;
  height: 2.34783rem;
  position: absolute;
  text-align: center;
  left: 0rem;
  top: 7.95652rem;
  opacity: 0;
  z-index: 99999; }
#circle-nav .inner-nav li a {
  width: 2.34783rem;
  height: 2.34783rem;
  background: #fff;
  display: block;
  float: left;
  border-radius: 100%;
  margin-left: 0.69565rem;
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
  box-shadow: 0 0 16px rgba($color: #000000, $alpha: 0.1); }
#circle-nav .inner-nav li a span {
  width: 100%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6087rem;
  line-height: 0.69565rem;
  color: #999;
  box-sizing: border-box;
  padding-left: 0.34783rem;
  padding-right: 0.34783rem;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out; }
</style>
